/*
//////////////////////////////////////////////////
Variables
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/
$baseline: 1.5;
$color-dark: #333;
$color-mid: #999;
$color-light: #ddd;
$font-stack: 'Open Sans', sans-serif;
$transition-duration: 300ms;

/*
//////////////////////////////////////////////////
Open Sans Import
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

/*
//////////////////////////////////////////////////
CSS Reset
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{ margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent}body{ line-height:1}article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{ display:block}nav ul{ list-style:none}blockquote,q{ quotes:none}blockquote:before,blockquote:after,q:before,q:after{ content:''; content:none}a{ margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent}ins{ background-color:#ff9; color:#000; text-decoration:none}mark{ background-color:#ff9; color:#000; font-style:italic; font-weight:bold}del{ text-decoration:line-through}abbr[title],dfn[title]{ border-bottom:1px dotted #000; cursor:help}table{ border-collapse:collapse; border-spacing:0}hr{ display:block; height:1px; border:0;  border-top:1px solid #ccc; margin:1em 0; padding:0}input,select{ vertical-align:middle}

/*
//////////////////////////////////////////////////
General
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

* {
	box-sizing: border-box;
}

body {
	color: $color-dark;
	font: 400 120% / #{$baseline} $font-stack;
	transition: font-size $transition-duration;
}

.container {
	margin: 0 auto;
	max-width: 40em;
	padding: #{$baseline * 2}em;
}

::-moz-selection {
	background: $color-dark !important;
	color: #fff !important;
	text-shadow: none !important;
}

::selection {
	background: $color-dark !important;
	color: #fff !important;
	text-shadow: none !important;
}

.fade {
	opacity: 0;
	position: relative;
	top: -10px;
	transition: 
		opacity $transition-duration * 2,
		top $transition-duration * 2
	;
}

.fade-load {
	opacity: 1;
	top: 0;
}

@media (max-width: 50em) {
	body {
		font-size: 100%;
	}
}

@media (max-width: 30em) {
	body {
		font-size: 90%;
	}

	.container {
		padding: #{$baseline}em;
	}
}

/*
//////////////////////////////////////////////////
Typography
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

h1 {
	font-size: 3em;
	font-weight: 600;
	letter-spacing: -0.05em;
	line-height: 1;
	margin-bottom: 0.1em;
}

h2 {
	color: $color-dark;
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1;
	margin-bottom: #{$baseline * 0.75}em;
}

h3 {
	font-size: 1.3em;
	font-weight: 400;
	line-height: 1;
	margin-bottom: #{$baseline * 0.5}em;
}

p {
	font-size: 0.9em;
	margin-bottom: #{$baseline * 1.25}em;
}

a {
	border-bottom: 1px solid $color-light;
	color: $color-dark;
	text-decoration: none;
	transition: color $transition-duration;
}

a:hover,
a:focus {
	color: $color-mid;
}

/*
//////////////////////////////////////////////////
Form
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

form {
	margin-bottom: #{$baseline * 1.5}em;
}

label {
	display: block;
	position: relative;
}

textarea,
input {
	border: 2px solid $color-light;
	border-radius: 0;
	color: $color-mid;
	display: block;
	font: 400 1em/1 $font-stack;
	margin: 0 0 0.5em;
	padding: 1em 1.25em;
	width: 100%;
	transition: 
		border-color $transition-duration, 
		color $transition-duration
	;
	-webkit-appearance: none;
	&:focus {
		border-color: $color-dark;
		color: $color-dark;
		outline: none;
	}
}

textarea {
	margin: 0;
	min-height: #{$baseline * 5}em;
	line-height: $baseline;
	overflow: auto;
	resize: vertical;
}

.arrow {
	border-top: 9px solid $color-light;
	border-right: 9px solid $color-light;
	border-bottom: 9px inset transparent;
	border-left: 9px inset transparent;
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	transition: border-color $transition-duration;
}

input:focus + .arrow,
textarea:focus + .arrow {
	border-top-color: $color-dark;
	border-right-color: $color-dark;
}

@media (max-width: 30em) {
	textarea,
	input {
		font-size: 1.3em;
	}
}

/*
//////////////////////////////////////////////////
Buttons
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/
.buttons {
	margin-bottom: #{$baseline * 1.5}em;
}

.button {
	background: $color-dark;
	color: #fff;
	display: block;
	float: left;
	font-size: 1em;
	font-weight: 600;
	padding: #{$baseline}em #{$baseline * 0.75}em;
	text-align: center;
	transition: background $transition-duration;
	width: 49%;
}

.button:last-child {
	float: right;
}

.button:hover,
.button:focus {
	background: $color-mid;
	color: #fff;
}

@media (max-width: 30em) {
	.button,
	.button:last-child {
		border: none;
		float: none;
		margin-bottom: #{$baseline * 0.5}em;
		width: auto;
	}
}

/*
//////////////////////////////////////////////////
Code
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

.code-wrap {
	margin-bottom: #{$baseline * 2}em;
}

pre {
	display: block;
	margin-bottom: #{$baseline * 0.75}em;
}

pre:last-child {
	margin-bottom: 0;
}

code {
	background: #eee;
	color: $color-dark;
	display: block;
	font-size: 0.9em;
	overflow: auto;
	padding: #{$baseline * 1.25}em #{$baseline * 1.25}em;
	-webkit-overflow-scrolling: touch;
}

code span {
	color: $color-mid;
}

/*
//////////////////////////////////////////////////
Footer
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

footer {
	border-top: 2px solid $color-light;
	padding-top: #{$baseline * 1.5}em;
}

footer p {
	font-size: 0.8em;
	margin-bottom: 0;
}

/*
//////////////////////////////////////////////////
Webkit Scrollbars
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

body::-webkit-scrollbar {
	width: 15px;
}

body::-webkit-scrollbar-track {
	background: $color-light;
}

body::-webkit-scrollbar-thumb {
	background: $color-dark;
}

body::-webkit-scrollbar-thumb:hover {
	background: $color-mid;
}

/*
//////////////////////////////////////////////////
Miscellaneous
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/

.clearfix:before,
.clearfix:after {
	content: '';
	display: table;
}

.clearfix:after {
	clear: both;
}

.clearfix {
	zoom: 1;
}